<template>
    <div class="amap-dr">
        <!--按钮-->
        <div>
            <div>
                <el-input @input="setAddressInfo" v-bind:value="address" style="width:82%;margin-right: 10px;"
                    :size="size"></el-input>
                <el-button :size="size" type="primary" @click="selectAddress">选择地址</el-button>
            </div>
            <div class="mt5" v-show="showLngLat">
                经度：
                <el-input :disabled="true" v-model="lng" style="width:100px;" :size="size"></el-input>纬度：
                <el-input :disabled="true" v-model="lat" style="width:100px;" :size="size"></el-input>
            </div>
        </div>

        <el-dialog custom-class="amap-dr__dialog" :title="addressInfo.address" :append-to-body="true" width="1000px"
            :visible.sync="dialogFormVisible">
            <div class="amap-dr__map">
                <div>
                    <p class="amap-dr__latlng">经度：{{ addressInfo.lng }} —— 纬度：{{ addressInfo.lat }}</p>
                    <div class="amap-dr__search">
                        <el-input placeholder="请输入内容" id="search" type="search" v-model="searchKey"
                            class="input-with-select">
                            <el-button slot="append" @click="searchByHand" icon="el-icon-search">搜索</el-button>
                        </el-input>
                        <div id="searchTip"></div>
                    </div>
                    <el-button class="amap-dr__btn" @click="sub" type="primary">确定</el-button>
                    <input v-if="toSearch" type="text" id="search1" />
                    <el-amap :plugin="plugin" style="height: 60vh;" :vid="vid" :zoom="zoom" :center="center"
                        class="amap-demo" :amapManager="amapManager" :events="events"></el-amap>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<style>
#searchTip {
    background-color: #fafafa;
}

.amap-dr__dialog .el-dialog__body {
    padding: 0 20px 20px 20px;
}

.amap-dr__map {
    position: relative;
    z-index: 100;
}

.amap-dr__search,
.amap-dr__latlng,
.amap-dr__btn {
    position: absolute;
    z-index: 101;
}

.amap-dr__search {
    top: 20px;
    left: 20px;
    width: 500px;
}

.amap-dr__latlng {
    top: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color: #fafafa;
    border-radius: 4px;
}

.amap-dr__btn {
    bottom: 20px;
    width: 100px;
    height: 40px;
    left: 400px;
}
</style>

<script>
import { AMapManager } from "vue-amap";

let amapManager = new AMapManager();
export default {
    name: 'AmapDr',
    props: {
        address: { default: '' },
        lat: { default: 0 },
        lng: { default: 0 },
        vid: { default: 'amap' },
        size: { default: 'small' },
        showLngLat: { default: true }
    },//
    data() {
        let vm = this;
        return {
            dialogFormVisible: false,
            zoom: 16,
            center: [121.59996, 31.197646],
            result: [],
            searchKey: '',
            toSearch: false,
            addressInfo: {
                address: '',
                lat: '',
                lng: '',
            },
            plugin: [{
                pName: 'ToolBar',
                position: 'LB'
            }],
            addressText: '',
            amapManager,
            map: null,
            events: {
                init(o) {
                    vm.map = o;
                }
            }
        };
    },

    watch: {
        map: function () {
            if (this.map != null) {
                this.startDrag();
            }
        },
    },
    methods: {
        selectAddress() {
            this.dialogFormVisible = true;
        },
        setAddressInfo(val) {
            //this.address = val;
            this.addressInfo.address = val;
            this.addressInfo.lat = this.lat;
            this.addressInfo.lng = this.lng;
            this.$emit('input', this.addressInfo);
        },
        startDrag() {
            var vm = this;
            let map = this.amapManager.getMap();
            AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
                var positionPicker = new PositionPicker({
                    mode: 'dragMap',
                    map: map
                });

                //如果不存在经纬度则执行定位
                if (vm.lat == "" || vm.lng == "") {
                    // 定位
                    let geolocation;
                    map.plugin('AMap.Geolocation', function () {
                        geolocation = new AMap.Geolocation({
                            showButton: true,        //显示定位按钮，默认：true
                            showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                            extensions: 'all'
                        })
                        map.addControl(geolocation);
                        geolocation.getCurrentPosition();
                        AMap.event.addListener(geolocation, 'complete', function (data) {
                            positionPicker.start();
                        });//返回定位信息
                    })
                    positionPicker.start();
                } else {
                    vm.center = [vm.lng, vm.lat];
                    positionPicker.start();
                }
                positionPicker.on('success', function (positionResult) {
                    vm.addressInfo.address = positionResult.address;
                    vm.addressInfo.lat = positionResult.position.lat;
                    vm.addressInfo.lng = positionResult.position.lng;
                })
                positionPicker.on('fail', function (failResult) {

                })
            });
            this.initSearch();
        },

        initSearch() {
            let vm = this;
            let map = this.amapManager.getMap();
            AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
                var poiPicker = new PoiPicker({
                    input: 'search', //输入框id
                    placeSearchOptions: {
                        map: map,
                        pageSize: 10
                    },//地点搜索配置
                    suggestContainer: 'searchTip',//输入提示显示DOM
                    searchResultsContainer: 'searchTip'//搜索结果显示DOM
                });
                vm.poiPicker = poiPicker;
                //监听poi选中信息
                poiPicker.on('poiPicked', function (poiResult) {
                    let source = poiResult.source;
                    let poi = poiResult.item;
                    if (source !== 'search') {
                        poiPicker.searchByKeyword(poi.name);
                    } else {
                        poiPicker.clearSearchResults();
                        vm.searchKey = poi.name;
                    }
                });
            });
        },
        sub() {
            console.log(this.addressInfo);
            //this.address = this.addressInfo.address;
            //this.lat = this.addressInfo.lat;
            //this.lng = this.addressInfo.lng;
            this.$emit('input', this.addressInfo);
            this.dialogFormVisible = false;
        },
        searchByHand() {
            if (this.searchKey != '') {
                this.poiPicker.searchByKeyword(this.searchKey);
            }
        },
    }
};
</script>